<template>
	<view class="city">
		<!-- 城市 -->
		<view class="bg">
			<template v-for="i in list">

			<view class="item" :key="i.type" v-if="i.children.length">
				{{i.type}}
			</view>
			<view class="tit">
				
			<view class="itemc" v-for="v in i.children" @click="changeCity(v.city_name)">
				{{v.city_name}}
			</view>
			</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {citys} from "../../api/user.js"
	import {mapMutations} from "vuex"
	export default {
		data() {
			return {
				list:[]
			};
		},
		 created() {
			
			this.gitlist()
			
		},
		methods:{
			async gitlist(){
				let res = await citys()
				
				let arr = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(item=>({
						type:item,
						children:[]
					}))
				// console.log(res);
					
				arr.forEach(item=>{
					res.forEach(item1=>{
						if(item.type==item1.city_pre){
							item.children.push(item1)
						}
					})
				})
				// console.log(arr);
				this.list = arr 
			},
			...mapMutations(["changeCity"]),
			// triy(v){
			// 	this.changeCity(v)
			// }
		},
		
	}
</script>

<style lang="scss">

.bg{
	// border: 1px solid red;
	width: 750rpx;
	// margin: 0 auto;
	background: #f6f6f6;
	display: flex;
	flex-direction: column;
	margin-bottom: 30rpx;
	.item{
		width: 92%;
		height: 80rpx;
		line-height: 80rpx;
		// padding-bottom: 60rpx;
		margin: 0 auto;
		// border: 1px solid red;
	}
	.tit{
		width: 92%;
		background: #ffffff;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		// border: 1px solid red;
	.itemc{
		width: 33%;
		text-align: center;
		padding: 20rpx 0; 
		font-weight: bolder;
	}
	}
}
</style>
